<template>
  <div class="page-search">
    <Form
      :formConfig="formConfig"
      v-model="formData"
      @handleReset="handleReset"
      @handleQuery="handleQuery"
    />
  </div>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits, ref } from 'vue'
import type { PropType } from 'vue'
import Form from '@/base-ui/form'
import { IFormConfig } from '@/base-ui/form/src/types'

const props = defineProps({
  formConfig: {
    type: Object as PropType<IFormConfig>
  }
})
const emit = defineEmits(['queryClick', 'resetClick'])
// formData上的属性应该是由穿过来的formConfig.formItem决定
// 优化一：
const formOriginData: any = {}
const formItems = props.formConfig?.formItem ?? []
for (const item of formItems) {
  formOriginData[item.field] = ''
}
const formData = ref(formOriginData)

// 重置搜索框
const handleReset = () => {
  // 子组件内部采用双向绑定的方式赋值不能用这种方式进行重置，直接赋值更新v-model子组件内部监听不到变化（赋值的数据不是基本数据类型，是引用类型：对象）
  // 法二：form子组件不采用双向绑定可以采用的赋值方式
  // formData.value = formOriginData

  // 法一： form子组件使用双向绑定需要重置时赋值方式
  for (const key in formOriginData) {
    formData.value[`${key}`] = formOriginData[`${key}`]
  }
  emit('resetClick')
}

const handleQuery = () => {
  emit('queryClick', formData.value)
}
</script>
